<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>

    {{ message }}
  </div>

  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue 222!'
      }
    })


    var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
<div id="app-7">
    <div>tittle</div>
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
      -->
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>
<script>
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  
  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  })
</script>


<div id="app-8">我是一个div<span>222</span>
    <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
      
</div>
<script>
    var vm = new Vue({
        el:"#app-8",
        template:`<div>我是template模span>222</span>板构建的节点</div>`,
        data:{
            classname1:true,
            classname2:false,
            text:'我时由render构建的p标签'
        },
        render(createElement){
            return createElement("p",{
                style:{
                    color:"red",
                    fontSize:'18px'
                },
                class:{//基于数据绑定class
                    classname1:this.classname1,
                    classname2:this.classname2
                }
            },[
                '我是一个文本节点',
                createElement('h1','我是h1标签'),
                createElement('h2',{
                    style:{
                        color:'orange'
                    }
                },'我是h2标签')
            ]);
        }
    })
</script>
</body>
</html>